<%-- 
    Document   : q275
    Created on : Jul 5, 2012, 1:51:58 PM
    Author     : ems
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../css/popup.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/pushscreen.js"></script>
    </head>
    <script type="text/javascript" language="javascript">
        $j = jQuery.noConflict();
        $j(document).ready(function(){
            $j('.keysearch').live('keyup',function(){
               // alert($j(this).parent().parent().find('.group').attr('class'));
                if($j('.keysearch').val() == ""){
                    $j(this).parent().parent().find('.group').show();
                                   
                }else{
                   $j(this).parent().parent().find('.group').hide();
                     $j(this).parent().parent().find('.group').each(function(){
                        html = $j(this).html();
                        if(   ununicode(html).indexOf(  ununicode($j('.keysearch').val()) ) > -1    )  {
                            $j(this).show();
                        }else{
                            $j(this).hide();
                        }
                    });
                }

            });
                
            $j('.keysearch1').live('keyup',function(){
                if($j('.keysearch1').val() == ""){
                   $j(this).parent().parent().parent().find('.group').show();
                                   
                }else{
                   $j(this).parent().parent().parent().find('.group').hide();
                    $j(this).parent().parent().parent().find('.group').each(function(){
                        html = $j(this).html();
                        if(   ununicode(html).indexOf(  ununicode($j('.keysearch1').val()) ) > -1    )  {
                            $j(this).show();
                        }else{
                            $j(this).hide();
                        }
                    });
                }

            });
        });
    </script>
    <style type="text/css">
        .message{
            color: red;
            float: left;
            margin-top: 35px;
            text-align: center;
            text-transform: uppercase;
            width: 100%;

        }
        .child .sourceItem, .child .destinationItem{
             height: 33px;
            font-size: 10px;
        }
        
        .child .sourceItem:hover, .child .destinationItem:hover{
             background: #E8E8E8!important;
        }
        #sourceDiv .group, #destinationDiv .group{
            font-size: 11px;
        }
        .sourceItemHeader{
            background-color: #4884B5;
            color: white;
        }
        #sourceDiv .group:hover{
            background: #E8E8E8!important;
        }
        #destinationDiv .group:hover{
            background: #E8E8E8!important;
        }
        .desNameItemHeader{
             background-color: #4884B5;
            color: white;
        }
        .keysearch {
            float: left;
            margin-left: 38px;
        }
        .keysearch1 {
            float: right;
    margin-right: 175px;
    margin-top: 12px;
    width: 277px !important;
        }
        .buttonsearch1 {
            background: url("../images/btn_search.png") no-repeat scroll 7px 4px white;
    border: 0 none;
    color: #FFFFFF;
    cursor: pointer;
    float: right;
    height: 20px;
    margin-left: 682px;
    margin-top: 13px;
    position: absolute;
    text-transform: uppercase;
    width: 28px;
        }
        .client{
            height: 35px;
            
            width: 100%;
        }
    </style>
    <body style=" float:left; width:auto; height:auto; margin:0px;">
        <f:view>
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <a4j:form id="group">
                <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_ADM_VIEW}'></div>" escape="false"/>
                <div class="popup" style="height:475px; width:739px">
                    <div class="popup-header">
                        <div class="title">  <h:outputText value="#{locale.permission}" /></div>
                    </div>
                    <div class="popup-content">
                        <div class="main_content" style="height:315px">
                            <div class="MasterdataContentScroll2" style="height:160px">

                                <div align="center" id="workPhaseContainer" style="min-width:888px">
                                    <div class="client">
                                        <h:inputText value="" onfocus="if(this.value=='')this.value='';" styleClass="keysearch1" />
                                                         <div  style="float: left;" class="buttonsearch1"></div>
                                    </div>
                                    <h:panelGroup  id="employeeGroupContainer">
                                        <div style="padding-top: 10px;">

                                            <div class='idEmployee' lang='1'></div>
                                            <div class="left" style="float: left;width: 43%;margin-left: 25px;min-width:315px ;">
                                                <div id="sourceDiv" class="sourcePanel" style="font-size: 12px;overflow-x:hidden">
                                                    <div class="sourceItemHeader" style="width : 100%;" ><h:outputText value="#{locale.right_not_in_group}"/>
                                                       
                                                    </div>
                                                    <h:outputText value="#{q275Controller.listQ150left}" escape="false" />
                                                </div>

                                            </div>
                                            <div class="buttonDiv" style="margin-left:8px;margin-right: 8px;min-width:95px">
                                                <div class="buttonPicklist" style="color:#58585A" onclick="moveBtnRight()"><h:outputText value="#{locale.add}"/></div><br/><br/>
                                                <div class="buttonPicklist" style="color:#58585A" onclick="moveBtnLeft()"><h:outputText value="#{locale.delete}"/></div><br/><br/>
                                                <div class="buttonPicklist" style="color:#58585A" onclick="moveAllRight()"><h:outputText value="#{locale.add_all}"/></div><br/><br/>
                                                <div class="buttonPicklist" style="color:#58585A" onclick="moveAllLeft()"><h:outputText value="#{locale.delete_all}"/></div>
                                            </div>
                                            <div class="right" style="float: left;width: 31%;min-width:263px"  >
                                                <div id="destinationDiv" class="destinationPanel" style="font-size: 12px;overflow-x:hidden" >
                                                    <div class="destinationItemHeader">
                                                        <div class="desNameItemHeader" style="width:100%;" >
                                                            <span style="margin-top: 3px;padding-left: 1px;">
                                                                <h:outputText value="#{locale.right_in_group}"/>

                                                            </span>
                                                                
                                                        </div>
                                                    </div>

                                                    <h:outputText value="#{q275Controller.listQ150right}" escape="false" />
                                                </div>
                                            </div>
                                        </div>
                                    </h:panelGroup>
                                </div>
                            </div>
                            <div class="message"><span style="color: white;">A</span></div>
                        </div>
                    </div>

                    <div class="popup-footer">
                        <h:inputHidden value="#{q200Controller.pq350}" id="pq350"/>
                        <div class="buttonsave" onclick="jQuery.fancybox.close(); "  ><span><h:outputText value="#{locale.close}"/></span></div>
                        <div class="buttonsave" onclick="saveQ275()"> <span><h:outputText value="#{locale.save}"></h:outputText></span></div>

                        </div>
                    </div>
            </a4j:form>
        </f:view>

    </body>
</html>
<script type="text/javascript">
    $j(document).ready(function(){
        yhight = ($j('.popup').height()-90)+"px" ;
        $j('.main_content').css('height',yhight );
        $j('.popup_content').css('height',yhight  );
    });

    function expand(obj){
        $j(obj).next().slideToggle('slow');
    }
    /*
     * Set selected style on click the source list
     */
    function changeStyleLeft(obj) {
        $j(".objSelect").removeClass("objSelect");
        $j(obj).addClass("objSelect");
    }

    /*
     * Set selected style on click the destination list
     */
    function changeStyleRight(obj) {
        //alert($j(obj).parent(".parentClass").find(".objClass").className);
        $j(".objSelect").removeClass("objSelect");
        $j(obj).addClass("objSelect");
    }

    /*
     * Move the selected on source to the destination with other type on double click
     */
    function moveRight(obj) {
        // the "align" atrribute on source item contains ID item
        // add item in dest list with 3 columns

        var group = $j(obj).attr("title");
        var id = $j(obj).attr("lang");

        if( $j(obj).hasClass('group')){

            var div = "";
            $j('.lgroupchild'+group).children().each(function() {
                div += "<div class='destinationItem ' ondblclick='moveLeft(this)' onclick='changeStyleRight(this)' lang='" + $j(this).attr('lang') + "' title='"+$j(this).attr('title')+"'>";
                div +=  $j(this).text();
                div += "</div>";
            });

            if($j('.rgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveLeft(this)' onclick='expand(this)' class='group rgroupparent"+group+"'>"+$j('.lgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child rgroupchild"+group+"'>";
                $j('#destinationDiv').append(head + div+"</div>");
            }
            else{
                $j('.rgroupchild'+group).append(div);
            }
            $j('.lgroupchild'+group).remove();
            $j('.lgroupparent'+group).remove();

        }

        else{
            var right = "<div class='destinationItem ' ondblclick='moveLeft(this)' onclick='changeStyleRight(this)' lang='" + id + "' title='"+group+"'>";
            right +=  $j(obj).text();
            right += "</div>";
            if($j('.rgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveLeft(this)' onclick='expand(this)' class='group rgroupparent"+group+"'>"+$j('.lgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child rgroupchild"+group+"'>";
                $j('#destinationDiv').append(head+right+"</div>");
                $j(obj).remove();


            }

            else{
                $j('.rgroupchild'+group).append(right);
                $j(obj).remove();

            }
            if($j('.lgroupchild'+group).html().length < 4){
                $j('.lgroupchild'+group).remove();
                $j('.lgroupparent'+group).remove();
            }
        }


    }


    /*
     *
     * Move the selected on dest to the source with other type on double click
     */
    function moveLeft(obj) {

        var group = $j(obj).attr("title");
        var id = $j(obj).attr("lang");

        if( $j(obj).hasClass('group')){

            var div = "";
            $j('.rgroupchild'+group).children().each(function() {
                div += "<div class='sourceItem ' ondblclick='moveRight(this)' onclick='changeStyleLeft(this)' lang='" + $j(this).attr('lang') + "' title='"+$j(this).attr('title')+"'>";
                div +=  $j(this).text();
                div += "</div>";
            });
            //alert(div);
            if($j('.lgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveRight(this)' onclick='expand(this)' class='group lgroupparent"+group+"'>"+$j('.rgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child lgroupchild"+group+"'>";
                $j('#sourceDiv').append(head + div+"</div>");
            }
            else{
                $j('.lgroupchild'+group).append(div);
            }
            $j('.rgroupchild'+group).remove();
            $j('.rgroupparent'+group).remove();

        }
        else{
            var left = "<div class='sourceItem' ondblclick='moveRight(this)' onclick='changeStyleLeft(this)' lang='"
                + id + "' title='"+group+"' >" +$j(obj).text();+ "</div>";
            if($j('.lgroupparent'+group).attr('class')== undefined){
                var head = "<div title='"+group+"' ondblclick='moveRight(this)' onclick='expand(this)' class='group lgroupparent"+group+"'>"+$j('.rgroupparent'+group).text()+"</div>";
                head += "<div style='display:none' class='child lgroupchild"+group+"'>";
                $j('#sourceDiv').append(head+left+"</div>");
                $j(obj).remove();
            }

            else{
                $j('.lgroupchild'+group).append(left);
                $j(obj).remove();

            }
            if($j('.rgroupchild'+group).html().length < 4){
                $j('.rgroupchild'+group).remove();
                $j('.rgroupparent'+group).remove();
            }
        }


    }

    /*
     * Move the selected on source to the destination with other type by button click
     */
    function moveBtnRight() {
        $j("#sourceDiv").find("div").each(function() {
            if($j(this).hasClass("objSelect")) {
                moveRight(this);
            }
        });
    }

    /*
     * Move the selected on dest to the source with other type by button click
     */
    function moveBtnLeft() {
        $j("#destinationDiv").find("div").each(function() {
            if($j(this).hasClass("objSelect")) {
                moveLeft(this);
            }
        });
    }

    /*
     * Move all from source to the dest with other type by button click
     */
    function moveAllRight() {
        $j("#sourceDiv").find("div").each(function() {
            if($j(this).hasClass("group")) {

                moveRight(this);
            }
        });
    }

    /*
     * Move all from dest to the source with other type by button click
     */
    function moveAllLeft() {
        $j("#destinationDiv").find("div").each(function() {
            if($j(this).hasClass("group")) {

                moveLeft(this);
            }
        });
    }
    /*
     * Save dest list
     */
    function saveQ275() {
        var list = "0,";
        $j(".destinationItem").each(function() {
            list+= $j(this).attr('lang')+",";
        });
        //alert(list);
        showPleaseWait();
        $j.post("adminq275detailaction.jsp", { values2 :list   },
        function(data){
            $j(".message").text("Cập nhật thành công!");
            hidePleaseWait();
        });
    }
</script>
